import * as echarts from "echarts";

const barType = ["已缴金额", "未缴金额"];

/**
 * 柱状图配置处理方法
 * @param {Array<Object>} data 传入相关数据
 * @returns {Object} 返回 Echarts Option 配置
 */
export const barOptionHandler = (data = []) => {
  return {
    tooltip: {
      trigger: "axis",
      formatter: params => {
        const [paidData, unpaidData] = params;
        const {
          marker: paidMarker,
          seriesName: paidSeriesName,
          value
        } = paidData;
        const {
          marker: unpaidMarker,
          seriesName: unpaidSeriesName
        } = unpaidData;
        const { name, paid, unpaid } = value;

        const paidContent = `${paidMarker}${paidSeriesName}：${paid} 万`;
        const unpaidContent = `${unpaidMarker}${unpaidSeriesName}：${unpaid} 万`;

        return `${name}<br />${paidContent}<br />${unpaidContent}`;
      },
      backgroundColor: "rgba(3, 26, 47, 0.6)",
      textStyle: { color: "#fff", fontSize: 12 }
    },

    legend: {
      right: "3%",
      top: "center",
      itemGap: 20,
      itemWidth: 8,
      itemHeight: 8,
      orient: "vertical",
      data: barType,
      textStyle: { fontSize: 10, color: "#fff" }
    },

    grid: {
      top: 30,
      right: "25%",
      bottom: "0",
      left: "5%",
      padding: "0 0 10 0",
      containLabel: true
    },

    dataset: {
      dimensions: ["name", "paid", "unpaid"],
      source: data
    },

    xAxis: {
      type: "category",
      axisTick: { alignWithLabel: true },
      axisLabel: {
        textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
      },
      axisLine: {
        lineStyle: { color: "rgba(255, 255, 255, 0.15)" }
      }
    },

    yAxis: {
      type: "value",
      name: "万",
      nameTextStyle: {
        align: "left",
        padding: [0, 0, 0, -18],
        color: "rgba(255, 255, 255, 0.65)"
      },
      axisLabel: {
        textStyle: { fontSize: 12, color: "rgba(255, 255, 255, 0.65)" }
      },
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        lineStyle: { color: "rgba(255, 255, 255, 0.15)" }
      }
    },

    series: [
      {
        name: barType[0],
        type: "bar",
        barWidth: 14,
        barGap: 0,
        itemStyle: {
          barBorderRadius: [2, 2, 0, 0],
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(96, 245, 255, 1)"
              },
              {
                offset: 1,
                color: "rgba(63, 164, 255, 1)"
              }
            ],
            false
          )
        }
      },
      {
        name: barType[1],
        type: "bar",
        barWidth: 14,
        barGap: 0.2,
        itemStyle: {
          barBorderRadius: [2, 2, 0, 0],
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0.25,
                color: "rgba(255, 116, 76, 1)"
              },
              {
                offset: 0,
                color: "rgba(255, 184, 156, 1)"
              },
              {
                offset: 1,
                color: "rgba(255, 54, 87, 1)"
              },
              {
                offset: 0.9,
                color: "rgba(255, 114, 166, 1)"
              }
            ],
            false
          )
        }
      }
    ]
  };
};
